<template>
	<view>
		<scroll-view :style="[listStyle]" :scroll-y="true">
			<view  class="drop-content">
			<view class="drop-content__head">{{headlabel}}</view>
			<view class="drop-content__body">
				 <view class="flex">
				 <view>
					<up-input
					   placeholder="最低价格"
					   border="surround"
					   v-model="formdata.minprice" 
					 ></up-input> 
				 </view>
				  <view class="u-m-10"><text>至</text></view>
				  <view>
					 <up-input
					    placeholder="最高价格"
					    border="surround"
					    v-model="formdata.maxprice" 
					  ></up-input>   
				  </view>
				</view>
				<view class="radio-group">
				 <up-radio-group
				    v-model="formdata.price"
				    placement="column" 
					:borderBottom="false"
					iconPlacement="right"
					shape="square" 
				  >
				    <up-radio
					   v-model="formdata.price"
				      :customStyle="{marginBottom: '8px'}"
				      v-for="(item, index) in items"
				      :key="index"
				      :label="index"
				      :name="item"	 
				    >
				    </up-radio>
				  </up-radio-group>
				</view>  
			</view>
			</view>
		</scroll-view>
		
		<view class="drop-action">
			<view class="drop-action__cancel">
				<u-button type="default" :plain="true" @click="cancel">取消</u-button>
			</view>
			<view class="drop-action__ok">
				<u-button type="primary" @click="ok">确定</u-button>
			</view>			
			
		 </view>
	</view>
</template>

<script>
	import { addUnit, addStyle, deepMerge } from '@/uni_modules/uview-plus/libs/function/index.js';
	
	export default{
		name:"sub-price",
		props:{
			items:{
				type: Object,
				default:[],
			},
			width:{
				type: [String, Number] ,
				default: 0,
			},
			height:{
				type: [String, Number] ,
				default: 300,
			},
			headlabel:{
				type:String,
				default: '自定义价格',
			}
		},
		emits: ['selectok' ,'changeItem'], 
	   data(){
			return {
				formdata:{
					minprice: "",
					maxprice: "",
					price: "",
					isok : false,
				}
			}
		},
		computed:{
			listStyle() {
				const style = {};
				if (this.width != 0) style.width = addUnit(this.width)
				if (this.height != 0) style.height = addUnit(this.height-50)
				// 如果没有定义列表高度，则默认使用屏幕高度			 
				return deepMerge(style, addStyle(this.customStyle))
			}
		},
		methods:{
			cancel(){
			    this.formdata.isok = false;
				this.$emit('selectok',  this.formdata );
			},
			ok(){ 
				this.formdata.isok = true;
				this.$emit('selectok',  this.formdata ); 
			},
		}
		
	}
</script>

<style lang="scss">
	.drop-content{
		 padding-top: 20rpx;
		 
		&__head{
			 
			padding-left: 40rpx;
		}
		
		.flex{
			display: flex;
			margin-top: 40rpx;
			padding-left: 40rpx;
			padding-right: 40rpx;
		}
		.radio-group{
			margin: 40rpx;
		}
		
	}
	.drop-action{
		display: flex; 
		justify-content: center;
		
		&__cancel{ 
			flex-grow: 1;
		}
		
		&__ok{
			flex-grow: 1;
		}
	}
</style>